<template>
	<view class="contain">

		<view class="bg-color-w padding-lr12 ">
			<view class="bg-color-w padding-tb12 flex f-j-s f-a-c b-bottom" v-if="user">
			    <view class="flex f-s-0 w-50 h-50 b-radius bg-img margin-r12" :style="user.headImg | bgimg(300)+''"></view>
				<view class="flex flex-1 f-c">
					<view class="f16-size" style="width:400rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{user.nickname}}</view>
					<view class="margin-t2" style="width:400rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{i18n['用户名']}}：{{user.code | hideCenterText}}</view>
				</view>

			</view>

		</view>




		<view class="bg-color-w padding-12">
			<view class="padding-lr20">
				<view class="">{{i18n['充值金额']}}</view>




						<view class="flex-col space-y-11">
							<view class="flex-row justify-between space-x-16">
								<view class="flex-col justify-center items-center text-wrapper_7  margin-t10"
@click="selectAmount(index)"
									:class="{'text-wrapper_active': amount_index==index }"
									v-for="item,index in amountArray">
									<text class="font_6 text_11">{{item}}</text>
								</view>
							</view>
						</view>




				<view class="flex f-a-c margin-t12">
					<text class="flex f-s-0 margin-r12 f32-size">￥</text>
					<view class="flex flex-1 h-70">
						<input v-model="amount" type="number" value="" class="input" style="font-size: 50px;" />
					</view>
				</view>

			</view>
		</view>
		<!-- <pay-item ref="payitem" class="padding-lr20 margin-t12" pageType="1" :isBalance="false" ></pay-item> -->
		<view class="padding-30 margin-t12">
			<!-- <view @click="recharge()" class="flex f-a-c f-j-c h-40 f15-size bg-color-linear-y t-color-w b-radius-5">{{i18n['充值']}}</view> -->
			<view  @click.stop="showPay()" class="flex f-a-c f-j-c h-40 f15-size bg-color-linear-y t-color-w b-radius-5">{{i18n['充值']}}</view>

		</view>

		<pay-item ref="payitem" @pay='pay' pageType="2"  :isBalance="false" ></pay-item>
	</view>
</template>
<style scoped>
/* @import url('@/static/css/index/index.css'); */



	.text-wrapper_7 {
		padding: 16rpx;
		background-color: #ededed;
		border-radius: 10rpx;
		width:90rpx;

		height: 80rpx;
		font-size: 24rpx;
		font-family: HarmonyOSSansSC;
		line-height: 22rpx;
		color: #000000;
	}



	.text-wrapper_active {
		background-color: #ffbd52;
		color: #fff;

	}

	.text-wrapper_active .font_6 {}
</style>
<script>
	import payItem from '@/components/common/payitem.vue';
	const API = require('@/utils/api/user.js').default;
	const $ = require('@/utils/api.js');
	let self;
	export default {
		data() {
			return {
				user:null,
				amount: '',
				amountArray: ["5", "10", "15", "20", "25", "其他"],
				amount_index:0,
			};
		},
		onLoad: function() {
			self = this;
			this.init();
			$.setTitle(this.i18n['充值']);


			this.amount = this.amountArray[this.amount_index]


			self.getUserInfo()
		},
		components: {payItem},
		methods: {
			selectAmount(index) {
				this.amount_index = index
					this.amount = this.amountArray[this.amount_index]
			},
			getUserInfo() {
				self.getUser({
					success(res) {
						console.log("getUser",res)
						self.user = res;
						uni.setStorageSync('userInfo',self.user);
					}
				})
			},
			showPay(index) {
				this.payIndex = index;
				this.$refs.payitem.open();
			},
			// recharge()
			pay(type){
				const self = this;
				if(self.amount == '') {
					$.$toast(self.i18n['请输入充值金额']);return;
				}
				// let type = this.$refs.payitem.type;
				$.ajax({
					url: API.rechargeApi,
					data: {
						amount: self.amount,
						payMethod: type,
					},
					method: 'POST',
					success(res) {
						// $.$toast(self.i18n['操作成功']);
						// self.back(1,2000);


						if (type != 'balance') {
							// #ifndef H5
							$.wxPay({
								payType: type.toLocaleLowerCase(),
								data: res.data.message,
								success(res) {
									// self.order['status'] = 1;
									// $.$toast(self.i18n['操作成功']);
									// self.back(1,2000);
								}
							})
							// #endif
							// #ifdef H5
							$.wxPayH5({
								data: res.data.message,
								success(res) {
									// self.order['status'] = 1;
									// $.$toast(self.i18n['操作成功']);
									// self.back(1,2000);
								}
							})
							// #endif
						}
						// if (type == 'balance') {
						// 	self.order['status'] = 1;
						// }
					}
				})
			},
			init() {},
		},
		computed: {
			i18n() {
				return this.$t('money')
			},
		},
		created() {
		},
		mounted() {},
		destroyed() {},
		components: {payItem},
		onPullDownRefresh() {
		},
		onReachBottom() {
		}
	}
</script>
